<template>
    <div class="container">
        <!-- 头部标签栏 -->
        <div class="top">
            <!-- 左侧标题 -->
            <div class="top-title">皓吱窝酒店后台管理</div>
            <!-- /左侧标题 -->
            <!-- 右侧内容 -->
            <div class="top-right">
                <div class="user-info">
                    <img src="../../assets/管理员.png" width="25px" />
                    <span style="margin-left: 10px;">{{token}}</span>
                </div>
                <div class="to-home">
                    <span><a style="color: #9E9EA0;text-decoration: none" href="" @click.prevent="exit()">退出</a></span>
                </div>
            </div>
            <!-- /右侧内容 -->
        </div>
        <!-- /头部标签栏 -->
        <!-- 管理端主体 -->
        <div class="admin-body">
            <!-- 左侧侧边栏 -->
            <div class="left-menu">
                <el-menu
                        style="height: 245px;"
                        default-active="2"
                        @open="handleOpen"
                        @close="handleClose"
                        background-color="#1A1B20"
                        text-color="#fff"
                        active-text-color="#ffd04b"
                        :default-active="this.$route.path" router
                >
                    <el-menu-item index="/user">
                        <i class="el-icon-s-custom"></i>
                        <span slot="title">用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="/role">
                        <i class="el-icon-user"></i>
                        <span slot="title">角色管理</span>
                    </el-menu-item>
                    <el-menu-item index="/roomtype" >
                        <i class="el-icon-office-building"></i>
                        <span slot="title">房型管理</span>
                    </el-menu-item>
                    <el-menu-item index="/room">
                        <i class="el-icon-house"></i>
                        <span slot="title">房间管理</span>
                    </el-menu-item>
                    <el-menu-item index="/orders">
                        <i class="el-icon-data-line"></i>
                        <span slot="title">订单管理</span>
                    </el-menu-item>
<!--                    <el-menu-item index="/classify">-->
<!--                        <i class="el-icon-help"></i>-->
<!--                        <span slot="title">订单管理</span>-->
<!--                    </el-menu-item>-->
                </el-menu>
            </div>
            <!-- /左侧侧边栏 -->
            <!-- 右侧内容 -->
            <div class="right-body">
                <router-view></router-view>
            </div>
            <!-- /右侧内容 -->
        </div>
        <!-- /管理端主体 -->
    </div>
</template>

<script>
    export default {
        name: 'admin',
        data () {
            return {
                token: localStorage.getItem('admin'),
                user: {
                    username: '管理员名称', // 用户名
                }
            }
        },
        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            exit(){
                alert("退出成功！")
                localStorage.removeItem("admin");
                this.$router.push({name:'Index'})
            }
        }
    }
</script>

<style scoped>
    .admin-body{
        display: flex;
    }
    .top {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
        height: 65px;
        background-color: #141a25;
    }
    .top-title {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 250px;
        height: 65px;
        font-size: 25px;
        font-weight: bolder;
        color: #0AACAB;
        background-color: #141a25;
        font-family:"gill sans mt condensed";
    }
    .top-right{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 350px;
        height: 65px;
    }
    .user-info{
        display: flex;
        align-items: center;
        width: 150px;
        color: #9E9EA0;
        font-weight: bold;
    }
    .to-home{
        color: #9E9EA0;
        font-weight: bold;
    }
    .left-menu{
        width: 200px;
        height: 780px;
        background-color: #1A1B20;
    }

    .right-body{
        width: 100%;
        height: 780px;
        background-color: rgba(0,0,0,.09);
    }
</style>
